@charset "UTF-8";
$fs:64px;
html {
    font-size: $fs;
}

//将px单位换算成rem单位
@function r($px) {
    @return $px/$fs*1rem
}

//flex布局
.flex {
    display: flex;
}

//头部样式
header {
    width: 100%;
    height: r(88px);
    border-bottom: r(1px) solid #c1c1c1;
    background: #F7F7F7;
    justify-content: space-around;
    align-items: center;
    //左右按键样式
    a {
        font-size: r(29px);
        color: #000000;
    }
    //标题样式
    span {
        font-size: r(35px);
        font-family: "宋体";
        font-weight: bold;
    }
}
//end

//账户信息模块
.userMsg {
    width: 100%;
    height: r(310px);
    color: white;
    background-image: url(../img/index-userMsg-bg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    a {
        color: white;
    }
    //flex布局
    flex-direction: column;
    //累计收入显示
    .allMoney {
        width: 100%;
        height: r(210px);
        justify-content: center;
        align-items: center;
        a {
            width: auto;
            flex-direction: column;
            align-items: center;
        }
        p {
            width: auto;
            display: inline-block;
        }
        .money {
            font-size: r(41px);
        }
        p:last-of-type {
            font-size: r(23px);
        }
    }
    //详细数据栏
    .userMsgMore {
        width: 100%;
        height: r(100px);
        justify-content: space-between;
        position: relative;
        a {
            width: 33.2%;
            height: 100%;
            background: rgba(0, 0, 0, .1);
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        //显示数据样式
        .p-fs {
            font-size: r(21px);
            margin-bottom: r(14px);
        }
        //文字样式
        .p-fs-text {
            font-size: r(23px);
        }
        //红点
        .red-c {
            width: r(10px);
            height: r(10px);
            border-radius: 10px;
            position: absolute;
            background-image: url(../img/index-red-c_03.png);
            background-position: 100% 100%;
            background-size: 100%;
            left: r(335px);
            top: r(14px);
        }
    }
}
//end

//主要功能模块
.content {
    width: 100%;
    height: r(632px);
    //添加商品
    .addProduct {
        background: #f3f4f6;
        width: 100%;
        height: r(119px);
        justify-content: center;
        align-items: center;
        a {
            width: r(600px);
            height: r(70px);
            font-size: r(26px);
            color: #e33030;
            border: r(1px) solid #e3e3e3;
            background: #ffffff;
            border-radius: r(5px);
            justify-content: center;
            align-items: center;
        }
        i {
            font-size: r(42px);
            color: #e33030;
            margin-right: r(18px);
            font-weight: bold;
        }
    }
    //菜单部分
    .menu {
        width: 100%;
        height: r(499px);
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        .menuFirst,
        .menuSecond {
            width: 100%;
            height: r(256px);
            justify-content: space-around;
            align-items: center;
            border-top: r(1px) solid #e3e3e3;
            a {
                width: 100%;
                height: 100%;
                color: #999999;
                font-size: r(23px);
                flex-direction: column;
                justify-content: center;
                align-items: center;
                .menu-logo {
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
                p {
                    font-size: r(23px);
                }
            }
        }
        .menuFirst {
            a:first-of-type {
                border-right: r(1px) solid #e3e3e3;
                .menu-logo {
                    width: r(82px);
                    height: r(79px);
                }
                p {
                    padding-top: r(40px);
                }   
            }
            a:nth-of-type(2) {
                border-right: r(1px) solid #e3e3e3;
                .menu-logo {
                    width: r(84px);
                    height: r(88px);
                }
                p {
                    padding-top: r(31px);
                }
            }
            a:last-of-type {
                .menu-logo {
                    width: r(90px);
                    height: r(74px);
                }
                p {
                    padding-top: r(43px);
                }
            }
            b {
                border-right: r(1px) solid #e3e3e3;
                ;
            }
        }
        .menuSecond {
            a:first-of-type {
                position: relative;
                border-right: r(1px) solid #e3e3e3;
                .menu-logo {
                    width: r(80px);
                    height: r(83px);
                }
                p {
                    padding-top: r(39px);
                }
                //消息图标
                .menu-msg {
                    width: r(32px);
                    height: r(33px);
                    position: absolute;
                    background-image: url(../img/index-msg_03.png);
                    background-position: 100% 100%;
                    background-size: 100%;
                    left: r(142px);
                    top: r(16px);
                }
            }
            a:nth-of-type(2) {
                border-right: r(1px) solid #e3e3e3;
                .menu-logo {
                    width: r(91px);
                    height: r(80px);
                }
                p {
                    padding-top: r(42px);
                }
            }
            a:last-of-type {
                .menu-logo {
                    width: r(90px);
                    height: r(84px);
                }
                p {
                    padding-top: r(38px);
                }
            }
        }
    }
}
//end

//尾部
footer {
    width: 100%;
    height: r(108px);
    border-top: r(1px) solid #e3e3e3;
    .footer-menu {
        width: 25%;
        height: 100%;
        a {
            width: 100%;
            height: 100%;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: black;
            font-size: r(20px);
            padding-top: r(14px);
        }
        .shoping {
            position: relative;
            //消息图标
            .shoping-num {
                width: r(21px);
                height: r(21px);
                position: absolute;
                background-image: url(../img/index-red-num_07.png);
                background-position: 100% 100%;
                background-size: 100%;
                left: r(88px);
                top: r(18px);
                color: white;
                line-height: r(21px);
                text-align: center;
            }
        }
    }
    .index-logo,
    .market-logo,
    .shoping-logo,
    .mine-logo {
        width: r(45px);
        height: r(42px);
        margin: 0 auto;
        img {
            width: 100%;
            height: 100%;
        }
    }
    p {
        padding-top: r(11px);
    }
}
//end

//添加商品弹窗
.addMask{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.6);
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    .addMaskContent{
        width: 100%;
        height: r(310px);
        background: #ffffff;
        position: absolute;
        bottom: 0;
        left: 0;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .btn{
            width: 100%;
            height: r(202px);
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: r(23px);
            color: #999999;
            .btn-img{
                width: r(100px);
                height: r(100px);
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            p{
                margin-top: r(20px);
            }
        }
        .canel{
            width: 100%;
            height: r(108px);
            border-top: 1px solid #e0e0e0;
            text-align: center;
            font-size: r(33px);
            line-height: r(108px);
        }
    }
}

//推广弹窗
.moreMask{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0,0,0,.4);
    display: none;
    .moreContainer{
        width: 100%;
        height: r(716px);
        background: white;
        position: absolute;
        bottom: 0;
        left: 0;
        font-size: r(40px);
        .moreMaskContent{
            width: 100%;
            height: r(616px);
            flex-direction: column;
            .First,.second,.last{
                width: 100%;
                height: 33.3%;
                justify-content: space-around;
                text-align: center;
                .moreLogo{
                    width: 33.3%;
                    height: 100%;
                    a{
                        width: 100%;
                        height: 100%;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        font-size: r(23px);
                        color: #999999;
                        i{
                            font-size: r(105px); 
                        }
                    }
                    .icon-weixin{
                        color: #85d16d;
                    }
                    .icon-pengyouquan{
                        color: #6dd193;
                    }
                    .icon-xinlang{
                        color: #f26868;
                    }
                    .icon-qq-fill{
                        color: #4c88f5;
                    }
                    .icon-QQkongjian{
                        color: #f0c759;
                    }
                    .icon-shouji{
                        color: #54d3b1;
                    }
                    .icon-liaotian_lightblue{
                        color: #ff936d;
                    }
                    .icon-erweima{
                        color: #DDDDDD;
                    }
                    .icon-fuzhilianjie{
                        color: #a8bcc8;
                    }
                }
            }
        }
        .moreCanel{
            width: 100%;
            height: r(100px);
            border: r(1px) solid #e0e0e0;
            justify-content: center;
            align-items: center;
            font-size: r(33px);
        }
        
    }
}


//添加功能按钮点击效果
.clickResponse { 
   opacity: 0.2;
}